<template>
  <!-- 确认提示框组件 -->
  <div
    class="swh-confirm"
    @click="
      close(cilckMaskOffBox, true);
      off(cilckMaskOffBox, true);
    "
    :style="{
      opacity: opacity,
    }"
  >
    <div
      class="swh-confirm-context"
      @click.stop
      :style="{
        top: top + 'px',
        opacity: opacity,
        backgroundColor: bgColor,
        width: width + 'px',
        padding: padding,
        borderRadius: borderRadius + 'px',
      }"
    >
      <!-- 右上角关闭icon -->
      <p
        v-if="rightTopCloseButton"
        class="iconfont icon-31guanbi swh-box-off"
        @click="
          close(true, true);
          off(true, true);
        "
      ></p>
      <!-- 标题 -->
      <p
        class="confirm_tit"
        :style="{
          textAlign: titTextAlign,
          color: titColor,
          lineHeight: titLineHeight + 'px',
          fontSize: titFontSize + 'px',
          fontWeight: titFontWeight,
        }"
        v-html="title"
      >
      </p>
      <!-- 内容 -->
      <p
        class="swh-confirm-msg"
        :style="{
          textAlign: conTextAlign,
          color: conColor,
          lineHeight: conLineHeight + 'px',
          fontSize: conFontSize + 'px',
          fontWeight: conFontWeight,
        }"
        v-html="content"
      ></p>
      <div class="swh-confirm-btn">
        <span
          class="swh-ok-btn"
          @click="
            ok(true);
            off(true);
          "
          v-if="buttonConfigs.yes"
          >{{ buttonConfigs.yes }}</span
        >
        <span
          class="swh-off-btn"
          @click="
            close(true);
            off(true);
          "
          v-if="buttonConfigs.no"
          >{{ buttonConfigs.no }}</span
        >
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  name: "ConfirmBox",
  props: {
    // 标题
    title: {
      type: String,
      default: "标题",
    },
    // 提示信息
    content: {
      type: String,
      default: "提示信息",
    },
    // 点击遮罩层是否关闭弹窗
    cilckMaskOffBox: {
      type: Boolean,
      default: true,
    },
    // 右上角关闭按钮
    rightTopCloseButton: {
      type: Boolean,
      default: true,
    },
    // 弹框样式
    top: {
      type: Number,
      default: 300,
    },
    bgColor: {
      type: String,
      default: "#fff",
    },
    width: {
      type: Number,
      default: 360,
    },
    padding: {
      type: String,
      default: "10xp 20px",
    },
    borderRadius: {
      type: Number,
      default: 4,
    },
    // 标题样式
    titTextAlign: {
      type: String,
      default: "left",
    },
    titColor: {
      type: String,
      default: "#000",
    },
    titLineHeight: {
      type: Number,
      default: 18,
    },
    titFontSize: {
      type: Number,
      default: 16,
    },
    titFontWeight: {
      type: Number,
      default: 100,
    },
    // 内容样式
    conTextAlign: {
      type: String,
      default: "justify",
    },
    conColor: {
      type: String,
      default: "#777",
    },
    conLineHeight: {
      type: Number,
      default: 22,
    },
    conFontSize: {
      type: Number,
      default: 14,
    },
    conFontWeight: {
      type: Number,
      default: 100,
    },

    // 按键配置
    buttonConfigs: {
      type: Object,
      default: () => {
        return {
          yes: "确定",
          no: "取消",
        };
      },
    },
    // 确认事件在config.js中定义
    ok: {
      type: Function,
      required: true,
    },
    // 取消事件在config.js中定义
    close: {
      type: Function,
      required: true,
    },
  },
  setup(props, ctx) {
    const topVal = 50;
    // 初始化高度,在传入参数的高度上-50，因为动画移动时会+50
    const top = ref(props.top - topVal);
    // 初始化隐藏
    const opacity = ref(0);
    // 显示时
    setTimeout(() => {
      top.value += topVal;
      opacity.value = 1;
    }, 0);
    // 确认和取消都隐藏弹窗
    const off = function (bool) {
      if (!bool) return;
      top.value -= topVal;
      opacity.value = 0;
    };

    return {
      top,
      opacity,
      off,
    };
  },
};
</script>
<style lang="less" scoped>
/* 外层遮罩层 */
.swh-confirm {
  caret-color: transparent;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transition: 0.3s;
  .swh-confirm-context {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    box-sizing: border-box;
    transition: 0.3s;
    padding: 10px 20px;
    .swh-box-off {
      position: absolute;
      right: 10px;
      top: 10px;
      &:hover {
        cursor: pointer;
        color: @TSA;
      }
    }
    .swh-confirm-msg {
      padding-top: 10px;
      // display: -webkit-box;
      // -webkit-box-orient: vertical;
      // -webkit-line-clamp: 3;
      // overflow: hidden;
    }
    .swh-confirm-btn {
      overflow: hidden;
      margin-top: 10px;
      .swh-ok-btn {
        background: @TSB;
        border-color: @TSB;
        color: #fff;
        &:hover {
          opacity: 0.8;
        }
      }
      .swh-off-btn {
        &:hover {
          color: @TSB;
          border-color: @TSC;
          background-color: @TSD;
        }
      }
    }
    .swh-confirm-btn span {
      margin: 0 5px;
      height: 32px;
      width: 56px;
      line-height: 30px;
      transition: 0.3s;
      float: right;
      cursor: pointer;
      background: #fff;
      border: 1px solid #dcdfe6;
      color: @HSB;
      text-align: center;
      box-sizing: border-box;
      font-size: 12px;
      border-radius: 4px;
    }
  }
}
</style>
